<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>当当网</title>
    <link rel="stylesheet" href="css/code2.css">
</head>
<body>
    <div id="container" >
        <div class="title">
                <img src="img/logo.jpg">
            <div>
                <span>尾品汇</span>
                <span>当当优品</span>
                <span>数字馆</span>
                <span>都看阅器</span>
                <span><img src="img/icon_count.png"></span>
            </div>
        </div>
        <div id="bgc">
                <ul class="nav1">
                    <li>首页</li>
                    <li>图书</li>
                    <li>音像</li>
                    <li>童装</li>
                    <li>服装</li>
                    <li>鞋靴</li>
                    <li>运动</li>
                    <li>箱包</li>
                    <li>美妆</li>
                    <li>珠宝</li>
                    <li>家居</li>
                    <li>食品</li>
                    <li>酒</li>
                    <li>手机</li>
                    <li>数码</li>
                    <li>电脑</li>
                    <li>家电</li>
                </ul>
        </div>
        <div id="image">
            <img src="img/banner.png" >
        </div>
        <div style="height:10px">
        
        </div>
        <section class="section">
            <img src="img/bg_bang.gif" class="bg_bang">
            <div class="context">
            <figure class="figure01">
                <img src="img/bookNo1.gif" class="no1">
                <img src="img/book-01.jpg">
                <aside>偷影子的人</aside>
                <article class="article">
                        作者：【法】马克·李维（ Marc Levy）著<br/>
                        出版社：湖南文艺出版社<br/>
                        当当价：<span style="color:red;font-size: 1.3em">￥17.90</span><br/>
                        不知道姓氏的克蕾儿。这就是你在我生命里的角色，我童年时的小女孩，今日蜕变成了女人，一段青梅竹马的回忆，一个时间之神没有应允的愿望。一个老是受班上同学欺负的度弱小男孩，因为拥有一种特殊能力而强大：他能"偷別人的影子
                </article>
            </figure>
            </div>
            <div class="context02">
                 <!-- 标签规定独立的流内容（图像、图表、照片、代码等等） -->
                <figure class="figure02">
                        <img src="img/bookNo2.gif" class="no2">
                        <img src="img/book-02.jpg">
                        <aside class="aside">
                            看见(央视知名记者、主持人柴静:十年个人成长的告白，中国社会变迁的备忘)
                        </aside>
                        <article class="article">
                            作者:柴静&nbsp;著<br>
                            出版社:广西师范大学出版社<br>
                            <span style="color:red;font-size: 1.3em">￥29.40</span>&nbsp;&nbsp;<span style="color:green;">7.4折</span>
                        </article>
                </figure>
                <figure class="figure03">
                    <img src="img/bookNo3.gif"  class="no3">
                    <img src="img/book-03.jpg" class="picture03">
                    <!-- aside 的内容应该与附近的内容相关 -->
                    <aside class="aside>">
                        改变孩子先改变自己
                    </aside>
                    <!-- 文章标签 -->
                    <article >
                        作者:贾荣韬&nbsp;贾毅&nbsp;著<br>
                        出版社:作家出版社<br>
                        <span style="color:red;font-size: 1.3em">￥22.20</span>&nbsp;&nbsp;<span style="color:green;">7.4折</span>
                    </article>
                </figure>
            </div>
            <!-- vertical-align:垂直对其一幅画 -->
            <div class="foot">Copyright©&nbsp;当当网&nbsp;2042017,All Rights Reserved<img style="vertical-align: middle;" src="./img/validate.gif">京ICP证041189号生出版物经营许可证&nbsp;新出发京批字第直0673号</div>
        </section>
    </div>
</body>
</html>